<html>

<head>
    <title>Highcharts对数图表</title>
    <meta charset="utf-8">
    <style>
        .container {
            width: 550px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script src="../lib/highcharts.js"></script>
    <script>
        $(function () {
            var title = { text: '对数图标' };
            var subtitle = { text: 'guides' };
            var xAxis = {
                tickInterval: 1
            };
            var yAxis = {
                type: 'logarithmic', // 对数
                minorTickInterval: 0.1
            };
            var plotOptions = {
                spline: {
                    marker: { enabled: true }
                }
            };
            // 提示
            var tooltip = { headerFormat: '<b>{series.name}</b><br/>', pointFormat: 'x = {point.x}, y = {point.y}' };

            var navigation = { menuItemStyle: { fontSize: '10px' } };
            // 数据
            var series = [
                {
                    name: 'Winter 2007-2008',
                    data: [1,2,4,8,16,32,64,128,256,512],
                    pointStart: 1
                }
            ];
            var data = {
                title: title, subtitle: subtitle, xAxis: xAxis, yAxis: yAxis,
                tooltip: tooltip, series: series, plotOptions: plotOptions
            };
            $(".container").highcharts(data);
        });
    </script>
</body>

</html>